<template>
  <el-col>
    <el-tabs v-model="activeName2" type="card">

      <el-tab-pane label="概况" name="first">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="水" value="1">
                </el-option>
                <el-option label="电能" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">已出发</h4>
              <div class="c-t-ct" style="color:#20A0FF;">176 辆</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">已到达</h4>
              <div class="c-t-ct" style="color:#13CE66;">208 辆</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">待出发</h4>
              <div class="c-t-ct" style="color:#13CE66;">8 辆</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">修整中</h4>
              <div class="c-t-ct" style="color:#FF4949;">5 辆</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row style="back">
          <el-col :span="24">
            <el-card class="charts-card">
              <img src="../../assets/hj/1275228151.jpg" alt="" style="width: 100%;">
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="分析预警" name="third">
        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <img src="../../assets/hj/fwzz/rljc.png" alt="" style="width: 100%;height: 500px;">
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <img src="../../assets/hj/fwzz/dxljk.png" alt="" style="width: 100%;height: 500px;">
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <img src="../../assets/hj/fwzz/ydjk.png" alt="" style="width: 100%;height: 500px;">
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card"><img src="../../assets/hj/fwzz/lscx.png" alt="" style="width: 100%;height: 500px;"></el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="配置规则" name="second">

        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加设备</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_1" style="width: 100%">
                    <el-table-column prop="date" label="对象">
                    </el-table-column>
                    <el-table-column prop="time" label="监控方式">
                    </el-table-column>
                    <el-table-column prop="num" label="检测参数">
                    </el-table-column>
                    <el-table-column prop="thing" label="排班计划"></el-table-column>
                    <el-table-column prop="run" label="运行情况"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="charts-card">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加线路</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_3_2" border style="width: 100%">
                    <el-table-column prop="name" label="线路名称">
                    </el-table-column>
                    <el-table-column prop="qy" label="区域">
                    </el-table-column>
                    <el-table-column prop="v" label="速度(km/h)"></el-table-column>
                    <el-table-column prop="an" label="安全系数(%)"></el-table-column>
                    <el-table-column prop="z" label="阻塞率(%)"></el-table-column>
                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="180">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </el-col>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      activeName2: 'first',
      tableData_3_1: [{
        date: '运输车A',
        time: '实时',
        num: 'xx',
        thing: 'xx',
        status: '0',
        run:'已到达',
        tj: 4.5,
        zip: 200333
      }, {
        date: '运输车B',
        time: '实时',
        num: 'xx',
        thing: 'xx',
        status: '0',
        run:'已到达',
        tj: 4.5,
        zip: 200333
      }, {
        date: '运输车C',
        time: '定时',
        num: 'xx',
        thing: 'xx',
        status: '0',
        run:'已到达',
        tj: 4.5,
        zip: 200333
      }, {
        date: '运输车D',
        time: '实时',
        num: 'xx',
        thing: 'xx',
        status: '0',
        run:'已到达',
        tj: 4.5,
        zip: 200333
      }, {
        date: '运输车E',
        time: '实时',
        num: 'xx',
        thing: 'xx',
        status: '0',
        run:'已到达',
        tj: 4.5,
        zip: 200333
      }],
      tableData_3_2: [{
        name: '线路A',
        qy: 'C区',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 3.5,
        status: '100',
      }, {
        name: '线路A',
        qy: 'C区',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 3.5,
        status: '100',
      }, {
        name: '线路A',
        qy: 'C区',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 4.5,
        status: '100',
      }, {
        name: '线路A',
        qy: 'C区',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 1.5,
        status: '100',
      }, {
        name: '线路A',
        qy: 'C区',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 2.5,
        status: '100',
      }]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>